<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title>选择用户</title>

    <link rel="stylesheet" href="../css/reset.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/text.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/form.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/buttons.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/layout.css" type="text/css" media="screen" title="no title"/>

    <link rel="stylesheet" href="../css/ui-darkness/jquery-ui-1.8.12.custom.css" type="text/css" media="screen"
          title="no title"/>
    <link rel="stylesheet" href="../css/plugin/jquery.visualize.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/facebox.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/uniform.default.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/dataTables.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/custom.css" type="text/css" media="screen" title="no title">
    <script src="../js/jquery/jquery-1.5.2.min.js"></script>
    <script src="/webjars/vue/2.5.17/dist/vue.js"></script>
    <style>
        .disabled{
            /*cursor:not-allowed;*/
            pointer-events: none;
          /*//  display: none;*/
        }
    </style>
</head>

<body>

<div style="width:90%; margin:0 auto;" id="app">
    <br/>
    <h2>选择用户</h2>


    <table class="data display">
        <thead>
        <tr>
            <th>用户编码</th>
            <th>用户姓名</th>
            <th>简码</th>
            <th>电话</th>
            <th>地址</th>
        </tr>
        </thead>
        <tbody>
        <tr class="odd" v-for="user in usUsers">
            <td><a href="javascript:;" @click="ok(user.userno);" v-text="user.userno">加载中</a></td>
            <td><a href="javascript:;" @click="ok(user.userno);" v-text="user.username">加载中</a></td>
            <td v-text="user.abc">加载中</td>
            <td v-text="user.phone">加载中</td>
            <td v-text="user.address">加载中</td>
        </tr>
        <div style="text-align: center" id="msg"></div>
        </tbody>
    </table>

    <div style="margin-right:20px;">
        <div class="page">
            <a href="javascript:;" @click="pageQuery(1)">第一页</a>
            <a href="javascript:;" @click="pageQuery(page.current-1)" :class=" page.current == 1 ? 'disabled' : ''">上一页</a>
            <input class="pageCount" value="7" v-model="page.current"/> / <input class="pageCount" readonly="readonly"
                                                                                 v-model="page.pages"/>
            <a href="javascript:;" :class=" page.current == page.pages ? 'disabled' : ''" @click="pageQuery(page.current+1)">下一页</a>
            <a href="javascript:;" @click="pageQuery(page.pages-0)">第末页</a>
        </div>
    </div>
</div>


<script src="../js/jquery/jquery-ui-1.8.12.custom.min.js"></script>
<script src="../js/misc/excanvas.min.js"></script>
<script src="../js/jquery/facebox.js"></script>
<script src="../js/jquery/jquery.visualize.js"></script>
<script src="../js/jquery/jquery.dataTables.min.js"></script>
<script src="../js/jquery/jquery.tablesorter.min.js"></script>
<script src="../js/jquery/jquery.uniform.min.js"></script>
<script src="../js/jquery/jquery.placeholder.min.js"></script>
<script src="../js/widgets.js"></script>
<script src="../js/dashboard.js"></script>
<script type="text/javascript">
    //条件查询
    function load() {
        const url = new URLSearchParams(location.search);
        $.ajax({
            type: 'GET',
            url: "/py-bill/findUser",
            data: url + '',
            dataType: 'JSON',
            success: function (json) {
                app.usUsers = json.data.list.records;
                app.page = json.data.list;
            }
        });
    }

    var app = new Vue({
        el: "#app",
        data: {
            usUsers: '',
            page: '',
        }, methods: {
            ok(no) {
                parent.callback1(no);
                var mylay = parent.layer.getFrameIndex(window.name);
                parent.layer.close(mylay);
            },
            //分页条件查询
            pageQuery(page) {
                const url = new URLSearchParams(location.search);
                $.ajax({
                    type: 'GET',
                    url: "/py-bill/findUser",
                    data: url + '&page=' + page,
                    dataType: 'JSON',
                    success: function (json) {
                        if(json.data.list.records==null){
                            $("#msg").html("没有查询到用户信息");
                        }
                        app.usUsers = json.data.list.records;
                        app.page = json.data.list;
                    }
                });
            }
        }, created() {
            load();
        }
    });

</script>
<script type="text/javascript">

    $(document).ready(function () {
        Dashboard.init();
    });

</script>

</body>

</html>